import React from 'react';
import PropTypes from 'prop-types';
import CSSTransitionGroup from 'react-addons-css-transition-group'
import './svg.css'
const getPath=(start,end,controlPoints)=>{
  const [fx,fy,sx,sy]=controlPoints;
  const controlPoint01=[start[0]+fx*(end[0]-start[0]),start[1]+fy*(end[1]-start[1])];
  const controlPoint02=[start[0]+sx *(end[0]-start[0]),start[1]+sy*(end[1]-start[1])];
  return `M${start}C${controlPoint01} ${controlPoint02} ${end}`
}

 export const BezierCurve=(props)=>{
  const {width,height,startPoint,endPoint,controlPoints,...others}=props;
  return (
  <svg width={width} height={height}>
    <path d={getPath(startPoint,endPoint,controlPoints)} fill="none" stroke="black" strokeWidth="2" {...others}>

    </path>

  </svg>
  )

}

BezierCurve.defaultProps={
  width:400,
  height:400,
  controlPoints:[1/3,0,2/3,1]
}

BezierCurve.propTypes={
  width:PropTypes.number,
  height:PropTypes.number,
  startPoint:PropTypes.arrayOf(PropTypes.number),
  endPoint:PropTypes.arrayOf(PropTypes.number),
  controlPoints:PropTypes.arrayOf(PropTypes.number)
}



export const BaseShapes=(props)=>{
  return (
  <svg width={500} height={200} viewBox="0 0 1000 400">
    <circle cx={100} cy={200} r={80} fill="#1e74e7" fillOpacity={0.4} stroke="#1e74e7" strokeWidth={4} />
   
    <rect x={265} y={90} width={150} height={200} fill="#99cc33"stroke="#99cc33" fillOpacity={0.4} strokeWidth={4} />

    <path d="M500,200L550,200L600,50L700,350L800,50L900,350L950,200h50" stroke="#ffab18" fill="none" strokeWidth={4} />
  </svg>
  )
}

export const Star=({size=12,fill='#666',x=0,y=0})=>{

  return (
    <svg x={x} y={y} width={size} height={size} viewBox="0 0 1024 1024" fill={fill}>
     <path d="M954.514 402.113c-7.724-22.304-27.494-38.582-51.328-42.155l-231.982-34.509-100.877-209.394c-10.595-22.01-33.307-36.087-58.312-36.087-24.918 0-47.632 14.077-58.264 36.087L352.876 325.449l-232.025 34.509c-23.84 3.574-43.606 19.851-51.329 42.155-7.685 22.299-1.873 46.884 14.989 63.662l169.98 169.855-39.451 235.515c-3.946 23.716 6.311 47.551 26.454 61.424 11.087 7.642 24.086 11.464 37.084 11.464a66.023 66.023 0 0 0 31.149-7.809l202.25-108.934L714.31 936.224c9.714 5.23 20.431 7.809 31.105 7.809a65.877 65.877 0 0 0 37.127-11.464c20.1-13.874 30.354-37.67 26.369-61.424L769.5 635.63l170.104-169.855c16.778-16.778 22.51-41.363 14.91-63.662zM734.95 590.657l-28.326 28.278 6.563 39.457 39.409 235.058-203.784-109.64-36.833-19.851-36.839 19.851-203.828 109.68 39.414-235.098 6.602-39.457-28.321-28.278-168.61-168.277 231.274-34.348 40.702-6.058 17.855-37.049 101.75-211.051 101.746 211.051 17.898 37.049 40.658 6.058 231.275 34.348L734.95 590.657z" />
    </svg>
  )

}

export const Tick=({size=12,fill='#666',x=0,y=0})=>{
  return (

    <svg x={x} y={y} width={size} height={size} viewBox="0 0 1024 1024" fill={fill}>
      <path  d="M1448.163556 180.849778L638.179556 992.995556c-19.114667 19.171556-45.511111 31.004444-74.695112 31.004444-29.184 0-55.580444-11.832889-74.695111-31.004444L30.947556 533.959111A105.813333 105.813333 0 0 1 0 459.036444a105.813333 105.813333 0 0 1 105.642667-105.927111c29.184 0 55.580444 11.832889 74.695111 31.004445l383.146666 384.170666L1298.773333 31.004444c19.114667-19.171556 45.511111-31.004444 74.695111-31.004444A105.813333 105.813333 0 0 1 1479.111111 105.927111c0 29.240889-11.832889 55.751111-30.947555 74.922667z" />
      
    </svg>
  )
   

}

export const Logo=()=>{
  return (
    <div>
      <CSSTransitionGroup transitionName="logo" component="div" transitionAppearTimeout={4000} transitionAppear={true} transitionEnter={false} transitionLeave={false}>
        <svg height="300" viewBox="0 0 1024 1024" key="svg">
        <path id="hi-path" fill="none" stroke="#000" d="M680.97024 343.06048A238.26432 238.26432 0 0 0 512 273.05984c-131.93216 0-238.92992 106.97728-238.92992 238.92992S380.06784 750.94016 512 750.94016c120.29952 0 219.5968-89.05728 236.19584-204.81024H512v-68.27008h307.2v34.12992a313.1392 313.1392 0 0 1-1.9968 34.14016C800.2048 699.74016 670.12608 819.21024 512 819.21024c-169.66656 0-307.2-137.53344-307.2-307.22048 0-169.64608 137.53344-307.2 307.2-307.2 84.82816 0 161.62816 34.39616 217.23136 89.99936l-48.26112 48.27136z" p-id="4074"></path>
        </svg>
      </CSSTransitionGroup>
    </div>
  )
}
